<template>
  <div class="detail">
    <SubHeader :title="this.list.name"></SubHeader>
    <DetailTop :path='list.coverImgUrl' ref="top"></DetailTop>
    <div class="bottom">
      <ScrollView ref="scrollview">
        <DetailBottom :playlist="list.tracks"></DetailBottom>
      </ScrollView>
    </div>
  </div>
</template>

<script>
import ScrollView from '../components/iscroll.vue'
import SubHeader from '../components/detail/DetailHeader.vue'
import DetailTop from '../components/detail/DetailTop.vue'
import DetailBottom from '../components/detail/DetailBottom.vue'
import { getPlayList, getAlbum, getArtistsSongs, getTopList } from '../api/index'
export default {
  name: 'Detail',
  created () {
    // console.log(this.$route.params.id)
    if (this.$route.params.type === 'Personalized') {
      getPlayList({ id: this.$route.params.id })
        .then((data) => {
          // console.log(data)
          this.list = data.data.playlist
          // console.log(this.list)
        })
        .catch(function (err) {
          console.log(err)
        })
    } else if (this.$route.params.type === 'Albums') {
      getAlbum({ id: this.$route.params.id })
        .then((data) => {
          // console.log(data)
          this.list = {
            name: data.data.album.name,
            coverImgUrl: data.data.album.picUrl,
            tracks: data.data.songs
          }
          // console.log(this.list)
        })
        .catch(function (err) {
          console.log(err)
        })
    } else if (this.$route.params.type === 'singer') {
      getArtistsSongs({ id: this.$route.params.id })
        .then((data) => {
          this.list = {
            name: data.data.artist.name,
            coverImgUrl: data.data.artist.picUrl,
            tracks: data.data.hotSongs
          }
        })
        .catch(function (err) {
          console.log(err)
        })
    } else if (this.$route.params.type === 'rank') {
      getTopList({ idx: this.$route.params.id })
        .then((data) => {
          this.list = {
            name: data.data.playlist.name,
            coverImgUrl: data.data.playlist.creator.backgroundUrl,
            tracks: data.data.playlist.tracks
          }
        })
        .catch(function (err) {
          console.log(err)
        })
    }
  },
  mounted () {
    const topHeight = this.$refs.top.$el.offsetHeight
    this.$refs.scrollview.scrolling((offsetY) => {
      const sc = (topHeight + offsetY) / topHeight
      if (offsetY > 0) {
        this.$refs.top.$el.style.transform = `scale(${sc})`
      } else {
        this.$refs.top.changeMask(1 - sc)
      }
    })
  },
  data () {
    return {
      list: []
    }
  },
  methods: {},
  components: {
    SubHeader,
    DetailTop,
    DetailBottom,
    ScrollView
  }
}
</script>

<style scoped lang='scss'>
  .detail{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: white;
    .bottom{
      position: fixed;
      top: 500px;
      left: 0;
      bottom: 0;
      right: 0;
    }
  }
</style>
